<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app"></div>

    <script src="/js/react.development.js"></script>
    <script src="/js/react-dom.development.js"></script>
    <script src="/js/babel.min.js"></script>
    <script type="text/babel">
      // 自定义组件语法2: class式组件
      class XzRating extends React.Component {
        //自定义组件需要继承自Component
        render() {
          // console.log(this.props); //通过从父类继承的props属性,可以获取组件属性
          //重写父类提供的"渲染"方法(生命周期方法),以对外提供组件模板
          let stars = "";
          for (let i = 0; i < this.props.count; i++) {
            stars += "☆";
          }
          let styleObj = { color: this.props.color };
          return <div style={styleObj}>{stars}</div>;
        }
      }
      // 创建组件
      let el = <XzRating count={5} color="red"></XzRating>;
      // 查找父容器
      let root = ReactDOM.createRoot(app);
      // 挂载子组件
      root.render(el);
    </script>
  </body>
</html>
